<template>
    <div>
        <van-nav-bar id="reset" title="医生列表" left-arrow @click-left="backHandle" fixed z-index="100" />

        <div class="pageCon fuPage">
            <div class="doctorList">
                <div class="doctorInfo" v-for="(item, index) in doctorList" :key="index" @click="toDetail(item)">
                    <div class="leftInfo">
                        <span>{{ item.doctorName || '名字' }}</span>
                        <span>{{ item.doctorTitle || '暂未设置' }}</span>
                        <span>{{ item.doctorDetail || '经验丰富' }}</span>
                        <img src="../../assets/index/point.png">

                    </div>
                    <img class="hospitalImg" src="../../assets/index/hospital.png">
                    <img :src="item.doctorPic" class="doctorImg">
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { getMain } from '../../network/index'
import { listDepartment, listDoctorByDepart, listDoctors } from '../../network/doctor'
export default {
    name: 'HomeR',
    data() {
        return {
            isLoading: false,
            departmentList: [],//科室列表
            departmentId: '',//科室 id
            doctorList: []
        }
    },
    mounted() {

    },
    methods: {

        toDetail(obj) {

            // 跳转到医生详情
            console.log(obj);
            this.$router.push({
                path: "/doctorDetail",
                query: {
                    doctor: obj
                },
            });


        },

        getDoctorList() {
            // listDoctors().then(res => {
            //     if (res.flag) {
            //         this.isLoading = false
            //         this.doctorList = res.data
            //         console.log(this.doctorList);
            //     }
            // })

            getMain({
                userType: localStorage.userType,
                userId: localStorage.userId,
            }).then(res => {
                if (res.flag) {
                    this.doctorList = res.data.doctors
                }
            })
        },

        pullHandle() {

            this.isLoading = true
            this.getDoctorList()
        },

        getDepartmentList() {
            listDepartment().then(res => {
                if (res.flag) {
                    this.departmentList = res.data
                }
            })
        },

        backHandle() {
            this.$router.back()
        },

    },
    created() {
        this.getDoctorList()
        // this.doctorList = this.$router.history.current.query.content
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.pageCon {
    padding: 30px;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #EEF1F7;
    // overflow: hidden;
}

.doctorList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30px;
    width: 100%;
}

.doctorList::-webkit-scrollbar {
    display: none !important;
}


.doctorInfo {
    margin: 0 36px 36px 0;
    position: relative;
    box-sizing: border-box;
    padding: 36px 0 18px 24px;
    display: inline-block;
    width: 300px !important;
    height: 308px;
    background: linear-gradient(-49deg, #FFFFFF, #EAFCF9);
    /* background: aquamarine; */
    box-shadow: 0px 1px 10px 0px rgba(51, 51, 51, 0.15);
    border-radius: 20px;
}


.leftInfo {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.leftInfo>span:first-child {
    font-weight: 500;
    font-size: 28px;
    color: #333333;
}

.leftInfo>span:nth-child(2) {
    margin-top: 10px;
    font-weight: 500;
    font-size: 20px;
    color: #858B90;
}

.leftInfo>span:nth-child(3) {
    display: block;
    width: 60%;
    margin-top: 10px;
    font-weight: 500;
    font-size: 28px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leftInfo>img:nth-child(4) {
    margin-top: 4px;
    width: 28px;
    height: 8px;
    margin-bottom: 40px;
}

.imageBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    margin-top: 2px;
    font-weight: 400;
    font-size: 20px;
    color: #333;
}

.imageBox>img {
    margin-bottom: 4px;
    width: 60px;
    height: 60px;
}

.doctorImg {
    position: absolute;
    width: 158px;
    height: 202px;
    right: 0px;
    bottom: 0px;
    background-color: azure;
    z-index: 1;
    border-radius: 20px !important;
}



.hospitalImg {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 118px;
    height: 90px;
}


#reset /deep/ .van-nav-bar__left .van-nav-bar__text,
#reset /deep/ .van-nav-bar__left .van-icon {
    color: #333 !important;
}
</style>